<template>
    <l-page>
        <!-- <l-navbar title="首页" leftIcon="" /> -->
        <view>
            <u-swiper radius="0" :list="settings.home_swipers.map((item: any) => {
                return {
                    url: $imgBase + item.url,
                    title: item.title
                };
            })" @click="toBanner" height="230" indicatorMode="line" :loading='settings.banner_loading'
                showTitle></u-swiper>
        </view>
        <!-- <view class="shadow rounded -mt-8 mx-3 overflow-hidden">
            <u-image width="100%" height="80" :src="$imgUrl + '600/80'"></u-image>
        </view> -->
        <view>
            <view class="text-lg font-bold m-3">
                工具助手
            </view>
            <view class="panel grid grid-cols-4 gap-2 justify-between">
                <navigator class="flex flex-col items-center" v-for="item, idx in navList" :key="idx" :url="item.link">
                    <u-image width="50" height="50" radius="50%" :src="item.icon"></u-image>
                    <view class="text-xs mt-2">{{ item.name }}</view>
                </navigator>
            </view>
        </view>
        <view class="text-lg font-bold m-3">
            <navigator v-if="settings.other_banners?.home_second" :url="settings.other_banners.home_second.link">
                <u-image width="100%" height="150" :src="$imgBase + settings.other_banners.home_second.url"></u-image>
            </navigator>
        </view>
        <view>
            <view class="text-lg font-bold m-3">
                推荐产品
            </view>
            <view class="grid grid-cols-2 justify-between gap-3 m-3">
                <navigator class="bg-white rounded p-2 flex" v-for="(item) in loan.productList" :url="item.link"
                    :key="item.id">
                    <view class="flex-1">
                        <view class="text-base">
                            {{ item.name }}
                        </view>
                        <view class="text-gray-400 text-xs">
                            {{ item.subject }}
                        </view>
                    </view>
                    <u-image width="60" height="60" :src="$imgBase + item.icon"></u-image>
                </navigator>
            </view>
        </view>
        <view class="bg-white text-center p-3 text-gray-400" v-if="settings.system_config">
            <div v-html="settings.system_config.footer_txt"></div>
        </view>
        <l-tabbar />
    </l-page>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { onMounted } from 'vue';
import Loan from "@/stores/loan"
import Settings from "@/stores/settings"
import fenhk from "@/assets/img/fenhk.png"
import jisuanqi from "@/assets/img/jisuanqi.png"
import yw from "@/assets/img/yw.png"
import shuifei from "@/assets/img/shuifei.png"

const settings = Settings();

let navList = [
    // {
    //     name: '指尖评估',
    //     link: '/pages/estimate/estimate',
    //     icon: pingu
    // },
    {
        name: '税费计算器',
        link: '/pages/tax-calculation/tax-calculation',
        icon: shuifei
    },
    {
        name: '月供计算器',
        link: '/pages/monthly-supply/monthly-supply',
        icon: jisuanqi
    },
    {
        name: '提前还款',
        link: '/pages/early-repayment/early-repayment',
        icon: fenhk
    },
    {
        name: '员工身份验证',
        link: '/pages/employee-verification/employee-verification',
        icon: yw
    }
]
const loan = Loan()

const toBanner = (idx: number) => {
    let item = settings.home_swipers[idx]
    uni.navigateTo({
        url: item.link
    })
    if (loan.productList.length == 0) loan.getProduct()
}
</script>

<style lang="scss" scoped>
.flex-1 {
    .text-base {
        font-weight: bold;
        color: #000000;
    }

    .text-xs {
        font-size: 20rpx;
    }
}
</style>
